<!-- <template>
  <div>
     <HelloCom name="Jim"></HelloCom>
     <HelloCom name="Lily"></HelloCom>
     <HelloCom name="Bob"></HelloCom>
    </div>
</template>

<script>
import HelloCom from './components/HelloCom.vue';
export default{
  components:{
    HelloCom,
  },
};
</script>

<style scoped>
</style>
 -->



<!-- <template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1" />ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2" />ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>

<script>
import ActiveCom1 from "./components/ActiveCom1.vue";
import ActiveCom2 from "./components/ActiveCom2.vue";
export default {
  data() {
    return {
      activeComponent: "ActiveCom2",
    };
  },
  components: {
    ActiveCom1,
    ActiveCom2,
  },
};
</script>

<style scoped>
</style>  -->




<!-- <template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
// 定义异步组件 AsyncCom
const AsyncCom = defineAsyncComponent(() => import("./components/HelloCom2.vue"))
export default {
  components: {
    AsyncCom
  }
}
</script>

<style scoped>
</style> -->


<!-- <template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default {
  data() {
    return {
      currentTab: "Tab1",
    };
  },
  // 注册组件
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>

<style>
</style> -->


<!-- <template>
  <div>
    <ChildCom msg="Hello,I am dad!"></ChildCom>
  </div>
</template>
<script>
import ChildCom from"./components/ChildCom.vue"
export default{
  components:{
    ChildCom
  }
};
</script>
<style scoped>
</style> -->


<!-- <template>
  <div>
    <ChildCom :name="name" :age="age"></ChildCom>
  </div>
</template>

<script>
import ChildCom from "./components/ChildCom.vue";
export default {
  data() {
    return {
      name: "Jim", // 姓名
      age: [], // 年龄
      gender: "", // 性别
      hobby: [] // 爱好
    };
  },
  components: {
    ChildCom
  }
};
</script>

<style scoped>
</style> -->



<!-- <template>
  <div>
    <mycom1 :parentMsg="msg"></mycom1>
  </div>
</template>

<script>
import mycom1 from "./components/MyCom1.vue";
export default {
  data() {
    return {
      msg: '父组件的msg'
    };
  },
  components: {
    mycom1
  }
};
</script>

<style>
</style>




 <template>
  <div>
    <mycom2 :childWidth="width"></mycom2>
  </div>
</template>

<script>
import mycom2 from "./components/MyCom2.vue";
export default {
  data() {
    return {
      width: 400
    };
  },
  components: {
    mycom2
  }
};
</script> -->




<!-- 
<template>
  <div>
    <ChildCom v-model="msg"></ChildCom> | {{ msg }}
  </div>
</template>

<script>
import ChildCom from "src/components/ChildCom4.vue"
export default {
  data() {
    return {
      msg: ""
    }
  },
  components: {
    ChildCom
  }
};
</script>

<style>
</style>
 -->


 <template>
  <div>
    <ChildCom5></ChildCom5>
  </div>
</template>

<script>
import ChildCom5 from "./components/ChildCom5.vue";
import ChildCom from "./components/ChildCom5.vue";
export default {
  components: {
    ChildCom5
  },
  provide: {
    message: 'Hello from parent'
  }
};
</script>